<template>
	<!-- 单位概况 -->
	<view class="box">
		<view>
			<view class="content" v-if="status">
				<view class="border_box" style="margin-top: 40rpx;">
					<fui-input class="field" label-class="font-color" :readonly="true" disabled v-model="list.workName"
						label="单位名称:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.address" label="单位地址:"
						placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.unitDistrict" label="所属区域:"
						placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.type" :label-width="100"
						label="土地规划类型:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.name" :label-width="120"
						label="安全负责人名字:" placeholder="" />
				</view>

				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.mobile" :label-width="120"
						maxlength="11" type="number" label="安全负责人联系方式:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.personInCharge" :label-width="120"
						label="主要负责人:" placeholder="" />
				</view>

				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.contactPersonInCharge"
						:label-width="120" maxlength="11" type="number" label="主要负责人联系方式:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.aa" :label-width="100"
						label="单位建筑面积:" placeholder="" />
				</view>
				<view class="bg_box">
					<view class="label">
						单位经营类型:
					</view>
					<view style="display: flex;flex-wrap: wrap;margin-left: 20rpx;margin-top: 10rpx;">
						<uni-data-checkbox style="width: 100%;" class="checkbox" v-model="list.checked"
							:localdata="sex"></uni-data-checkbox>
					</view>
				</view>
				<view class="display_column">
					<button class="btn80" @click="submit()">提交</button>
				</view>
				<!-- <view v-if="user.power == 1">
					<van-button class="btn80" @click="submit()">提交</van-button>
				</view>
				
				<view v-if="user.power == 2">
					<van-button class="btn80" @click="submit()">提交</van-button>
				</view> -->

			</view>
			<view class="content" v-if="!status">
				<view class="border_box" style="margin-top: 40rpx;">
					<fui-input label-class="font-color" class="field" v-model="list.workName" disabled label="单位名称:"
						:readonly="true" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.address" disabled :readonly="true"
						label="单位地址:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.unitDistrict" disabled
						:readonly="true" label="所属区域:" placeholder="" />
				</view>

				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.type" disabled :readonly="true"
						:label-width="100" label="土地规划类型:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.name" disabled :readonly="true"
						:label-width="120" label="安全负责人名字:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.mobile" disabled :readonly="true"
						:label-width="120" label="安全负责人联系方式:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.personInCharge" disabled
						:readonly="true" :label-width="120" label="主要负责人:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.contactPersonInCharge" disabled
						:readonly="true" :label-width="120" label="主要负责人联系方式:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.aa" disabled :readonly="true"
						:label-width="100" label="单位建筑面积:" placeholder="" />
				</view>
				<view class="border_box">
					<fui-input class="field" label-class="font-color" v-model="list.userExpirationTime" disabled
						:readonly="true" :label-width="100" label="帐户到期时间:" placeholder="" />
				</view>
				<view class="bg_box">
					<view class="label">
						单位经营类型:
					</view>
					<view style="display: flex;flex-wrap: wrap;margin-left: 20rpx;margin-top: 10rpx;">
						<uni-data-checkbox style="width: 100%;" class="checkbox" v-model="list.checked"
							:localdata="sex"></uni-data-checkbox>
					</view>
				</view>
				<view class="display_column" v-if="user.power == 1 || user.power == 2">
					<button class="btn80" @click="status=!status">修改</button>
				</view>

				<view class="display_column" v-if="user.power == 3">
					<button class="btn80" @click="status=!status">修改</button>
				</view>
			</view>
		</view>
		<view>
			<u-picker title="请选择时间分类" @confirm="onUniTime" @cancel="showUniTime = !showUniTime" :show="showUniTime"
				:columns="uniTimecolumns"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		BASE_IP
	} from '@/common/http/url.js'
	export default {
		data() {
			return {
				defaultValue: '',
				sex: [{
						text: '甲乙类厂房',
						value: '甲乙类厂房'
					},
					{
						text: '丙类厂房',
						value: '丙类厂房'
					},
					{
						text: '丁戊类厂房',
						value: '丁戊类厂房'
					},
					{
						text: '甲乙类仓库',
						value: '甲乙类仓库'
					},
					{
						text: '丙类仓库',
						value: '丙类仓库'
					},
					{
						text: '丁戊类仓库',
						value: '丁戊类仓库'
					},
					{
						text: '办公',
						value: '办公'
					},
					{
						text: '普通商业',
						value: '普通商业'
					},
					{
						text: '娱乐类商业',
						value: '娱乐类商业'
					},
					{
						text: '体育场馆',
						value: '体育场馆'
					},
					{
						text: '餐饮就业',
						value: '餐饮就业'
					},
					{
						text: '酒店商业',
						value: '酒店商业'
					},
					{
						text: '公寓商业',
						value: '公寓商业'
					},
				],
				status: true,
				list: {
					workName: '',
					address: '',
					type: '',
					name: '',
					mobile: '',
					area: '',
					aa: '',
					checked: '',
					id: '',
					userExpirationTime: "",
					unitDistrict: "",
					personInCharge: "",
					contactPersonInCharge: ""
				},
				active: 0,
				vTabs: false,
				value1: 0,
				flag: false,
				index: 0,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				
				user: "",
				units: "",
				recordIndex: 0,
				showUniTime: false,
				uniTimecolumns: [
					['全部', '30天', '60天', '90天']
				],
				title: "时间分类：",
				unitTitle: "全部",
				unitsSortdata: [],
				day: 0,
				preset: ""
			}
		},

		created() {
			let user = uni.getStorageSync("user")
			this.user = user
			this.queryUnit()
		},
		methods: {
			queryUnit() {
				let user = uni.getStorageSync("user")
				// console.log("用户对象：",user)
				let url = BASE_IP + "pc/unit/query/" + user.userName
				uni.request({
					url: url,
					header: {
						"Authorization": user.token
					},
					success: (res) => {
						if (res.statusCode == 200 && res.data != '') {
							console.log(res.data)
							this.list.name = res.data.safetyName
							this.list.type = res.data.landPlanningType
							this.list.mobile = res.data.safetyPhone
							this.list.workName = res.data.unitName
							this.list.address = res.data.unitAddress
							this.list.aa = res.data.unitArea
							this.list.id = res.data.unitID
							this.list.checked = res.data.unitType
							this.list.userExpirationTime = user.userExpirationTime
							this.list.unitDistrict = res.data.unitDistrict
							this.list.personInCharge = res.data.personInCharge
							this.list.contactPersonInCharge = res.data.contactPersonInCharge
							this.status = false
							let title = res.data.unitDistrict + "消防重点单位智能管理系统"
							uni.setStorageSync("unit", this.list)
							// console.log("消防单位对象：", title)
							// uni.setNavigationBarTitle({
							// 	title: "消防单位概况"
							// })
						}

						// console.log("获取单位对象：",res)
					},
					fail: () => {
						uni.showToast({
							title: "服务器出现问题",
							icon: "error"
						})
					}
				})
			},
			submit() {
				let user = uni.getStorageSync('user')
				if (this.list.workName === "" || this.list.address === "" || this.list.type === "" || this.list
					.name ===
					"" || this.list.mobile === "" || this.list.aa === "" || this.list.checked === "") {
					uni.showToast({
						title: '需填写完整',
						icon: 'none',
						duration: 2000
					})

				} else if (this.list.id == '' || this.list.id == null) {
					// const store = useLoginStore()
					// console.log(this.list.checked)

					var Name = user.userName
					let mlist = {
						unitName: this.list.workName,
						unitAddress: this.list.address,
						unitAbbreviation: "",
						unitDistrict: this.list.unitDistrict,
						landPlanningType: this.list.type,
						safetyName: this.list.name,
						safetyPhone: this.list.mobile,
						unitType: this.list.checked,
						unitArea: this.list.aa,
						userName: Name,
						personInCharge: this.list.personInCharge,
						contactPersonInCharge: this.list.contactPersonInCharge
					}

					console.log(mlist)


					// console.log("传的数据：", mlist)
					let url = BASE_IP + "pc/unit/insert"
					let _this = this
					uni.request({
						url: url,
						header: {
							"Authorization": user.token
						},
						data: mlist,
						method: "POST",
						success: (res) => {
							if (res.statusCode == 200) {
								uni.showToast({
									title: "提交成功",
									icon: "success"
								})
								// _this.status = false
								this.queryUnit()
								return
							}
						},
						fail: () => {
							uni.showToast({
								title: "提交失败",
								icon: "error"
							})
							return
						}
					})

				} else if (this.list.id != null || this.list.id != '') {
					let ulist = {
						unitName: this.list.workName,
						unitAddress: this.list.address,
						unitAbbreviation: "",
						unitDistrict: this.list.unitDistrict,
						landPlanningType: this.list.type,
						safetyName: this.list.name,
						safetyPhone: this.list.mobile,
						unitType: this.list.checked,
						unitArea: this.list.aa,
						userName: Name,
						unitID: this.list.id,
						personInCharge: this.list.personInCharge,
						contactPersonInCharge: this.list.contactPersonInCharge
					}
					if (ulist.personInCharge === ulist.safetyName) {
						uni.showModal({
							title: "提示",
							content: "安全负责人和主要负责人不能为同一个人！",
							showCancel: false
						})
						return
					}
					console.log(ulist)

					let url = BASE_IP + "pc/unit/update"
					uni.request({
						url: url,
						header: {
							"Authorization": user.token
						},
						data: ulist,
						method: "POST",
						success: (res) => {
							if (res.statusCode == 200) {
								uni.showToast({
									title: "修改成功",
									icon: "success"
								})
								// _this.status = false

								this.queryUnit()

								return
							}
						},
						fail: () => {
							uni.showToast({
								title: "修改失败",
								icon: "error"
							})
							return
						}
					})
				}
				this.status = false
			},
			onUniTime(res) {
				let day = 0
				if (res.indexs == 0) {
					this.unitTitle = "全部"
					day = 0
					this.unitsSort(day)
				}
				if (res.indexs == 1) {
					this.unitTitle = "30天"
					day = 30
					this.unitsSort(day)
				}
				if (res.indexs == 2) {
					this.unitTitle = "60天"
					day = 60
					this.unitsSort(day)
				}
				if (res.indexs == 3) {
					this.unitTitle = "90天"
					day = 90
					this.unitsSort(day)
				}
				this.showUniTime = false
			},
			unitsSort(day) {
				let data = this.units;
				const today = new Date().setHours(0, 0, 0, 0); // 获取当前日期的时间戳，忽略时间部分
				data.forEach(obj => {
					if (obj.fireMaintenanceExpirationTime) {
						const expirationTime = new Date(obj.fireMaintenanceExpirationTime).setHours(0, 0, 0,
							0); // 获取过期日期的时间戳，忽略时间部分
						const daysDifference = Math.floor((expirationTime - today) / (24 * 60 * 60 *
							1000)); // 计算天数差
						obj.daysSinceToday = daysDifference;
					} else {
						obj.daysSinceToday = 0;
					}
				});

				if (day === 0) {
					data.sort((a, b) => new Date(a.fireMaintenanceExpirationTime) - new Date(b
						.fireMaintenanceExpirationTime));
				} else {
					data = data.filter(obj => obj.daysSinceToday <= day);
					data.sort((a, b) => a.daysSinceToday - b.daysSinceToday);
				}

				this.unitsSortdata = data;
			},
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "/pagesMine/notificationCenter/notice/notice"
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/font_4345741_sh6hb2nmgxi/iconfont.css";
	body {
		background-color: rgb(247, 247, 247);
	}
	.unitProfileBox {
		margin-top: 142vh;
		.border_box {
			border-bottom: 2px solid #eeeeee;
			width: 95%;
			margin: auto;
			margin-top: 20rpx;

		}

		.field {
			border-radius: 15rpx;
		}

		.bg_box {
			background-color: white;
			border-radius: 15rpx;
			border-bottom: 2px solid #eeeeee;
			margin: auto;
			margin-top: 20rpx;
			width: 95%;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}

		.label {
			margin-left: 30rpx;
			font-size: 28rpx;

		}

		.checkbox {
			margin-top: 10rpx;
			/* margin-right: 20rpx; */
			font-size: 28rpx;
			width: 10rpx;
		}

		.btn80 {
			background-color: #49A0FF;
			color: white;
			width: 80%;
			margin:30rpx 0;
			padding: 20rpx 0;
			border-radius: 50rpx;
			text-align: center;
		}

		:deep(.uni-label-pointer) {
			width: 180rpx;
		}

		:deep(.checklist-box) {
			width: 25%;
		}

		:deep(.checklist-text) {
			width: 160rpx;
		}

		:deep(.font-color) {
			color: #303133;
		}

		.fui-grid__cell {
			width: 150rpx;
			height: 150rpx;
			text-align: center;
			margin: 20rpx auto;
			font-size: 8px;
			color: #303133;
		}

		.record-son {
			width: 90%;
			height: 100%;
			margin: 20rpx auto;
		}

		.routine-text {
			display: flex;
			align-items: center;
		}
	}
</style>